<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../js/vue.js"></script>
    <title>自定义指令</title>

    <!-- 
        需求1：定义一个v-big指令，和v-text功能类似，但是会把绑定的数值放大10倍
        需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其绑定的input元素默认获取焦点
    -->

    <!-- 
       自定义指令总结:
                一、定义语法:
                    (1).局部指令:                                      
                        new Vue({                                  new Vue({
                            directives:{指令名,配置对象}    或         directives:{指令名,回调函数}
                        })                                         })
                    (2).全局指令:
                        Vue.directive('指令名',配置对象)    或      Vue.directive('指令名',回调函数)

                二、配置对象中常用的三个回调:
                    (1).bind:指令与元素成功绑定时调用
                    (2).inserted:指令所在元素被插入页面时调用
                    (3).update:指令所在模板结构被重新解析时调用
                
                    
                三、备注:
                    1.指令定义时不加v-,但是使用时要加v-
                    2.指令如果多个单词,要使用kebab-case命名方式,不要用camelCase命名
                    3.自定义指令里边this指向是window而不是Vm实例
     -->
  </head>

  <body>
    <div id="root">
      <h2>初始化的n值{{n}}</h2>
      <h2>
        当前N的值是
        <span v-big="n" v-time-out="n" v-time-input="n"></span>
      </h2>
      <button @click="n++">点我N+1</button>
      <hr />
      <input type="text" v-fbind:value="n" />
    </div>
  </body>
  <script>
    Vue.config.productionTip = false
    Vue.directive('fbind2', {
      bind(element, binding) {
        element.value = binding.value
        console.log('bind')
      },
      //指令所在元素被插入页面时
      inserted(element, binding) {
        element.focus()
        console.log('inserted')
      },
      //   指令所在得模板被重新解析时
      update(element, binding) {
        element.value = binding.value
        element.focus()
        console.log('update')
      },
    })
    Vue.directive('fbind2', function (element, binding) {
      console.log('全局指令')
    })
    new Vue({
      el: '#root',
      data() {
        return {
          n: 10,
        }
      },

      directives: {
        // 多个单词指令名的命名方式
        // 命名方式一：完整写法
        'time-out': function () {
          console.log(
            '本身directives是一个对象，所以本来是key和value写法，这是最完整的方式，下边的函数形式是js中简写，直接去掉function和冒号：，对于横杠的-也可以简写，但是需要加引号，因为普通属性名称，不加双引号也自动转化为字符串，但是特殊字符的会有问题，所以需要转化为字符串',
          )
        },
        // 命名方式二：带有横杠的-名称简写形式
        'time-input'() {
          console.log('-的简写形式')
        },

        // 命名方式三：普通属性名称不用加''的写法
        //   函数形式：其实就是bind和update得缩写形式
        big(element, binding) {
          console.log(element, binding)
          if (typeof binding.value == 'number') {
            element.innerHTML = binding.value * 10
          } else {
            element.innerHTML = binding.value
          }
        },

        // 对象形式，常用得三个函数
        fbind: {
          // 指令与元素成功绑定时（一上来）
          bind(element, binding) {
            element.value = binding.value
            console.log('bind')
          },
          //指令所在元素被插入页面时
          inserted(element, binding) {
            element.focus()
            console.log('inserted')
          },
          //   指令所在得模板被重新解析时
          update(element, binding) {
            element.value = binding.value
            element.focus()
            console.log('update')
          },
        },
      },
    })
  </script>
</html>
